import logo from './logo.svg';
import './App.css';
import React,{createRef,createContext,useState,useEffect, useRef,useContext} from 'react';
import {BrowserRouter,Routes,Route,Link,useNavigate} from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About';
import Login from './pages/Login';
import {Layout} from './pages/Layout'
import NotFound from './pages/NotFound';

function App () { 
    return (
        <BrowserRouter>
          {/* 点击跳转 */}
          <Link to="/">首页</Link>
          <Link to="/about">关于</Link>
          {/* 路由出口位置 */}
          <Routes>
            <Route path='/' element={<Layout />}>
              {/* 默认二级 添加index属性 把它原来的path干掉 */}
              <Route index element={<Home />} />
              <Route path='/about' element={<About />}></Route>
            </Route>
            {/* 当所有的路由都没有匹配，做兜底匹配，显示未找到 */}
            <Route path='*' element={<NotFound />}></Route>
          </Routes>
        </BrowserRouter>
    )
}

export default App
